/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
    
    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
      <el-dialog :visible.sync="dialogVisible">
        <el-form @submit.native.prevent :model="addUserForm" label-width="80px">
           <el-form-item label="emp_id" prop="emp_id">
              <el-input v-model="addUserForm.emp_id" placeholder="输入员工编号">
              </el-input>
            </el-form-item>
          <el-form-item label="phone_id" prop="phone_id">
              <el-input v-model="addUserForm.phone_id" placeholder="输入员工电话号码">
              </el-input>
            </el-form-item>
          <el-form-item label="job_id" prop="job_id">
              <el-input v-model="addUserForm.job_id" placeholder="输入员工工作编号">
              </el-input>
            </el-form-item>
          <el-form-item label="password" prop="password">
              <el-input v-model="addUserForm.password" placeholder="输入员工密码">
              </el-input>
            </el-form-item>
        <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm('addUserForm')">添加</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>

    <el-button type="primary" @click="dialogVisible0 = true">添加员工</el-button>
      <el-dialog :visible.sync="dialogVisible0">
        <el-form @submit.native.prevent :model="addEmployForm" label-width="80px">
           <el-form-item label="emp_id" prop="emp_id">
              <el-input v-model="addEmployForm.emp_id" placeholder="输入员工编号">
              </el-input>
            </el-form-item>
          <el-form-item label="name" prop="name">
              <el-input v-model="addEmployForm.name" placeholder="输入员工名字">
              </el-input>
            </el-form-item>
           <el-form-item label="department_id" prop="department_id">
              <el-input v-model="addEmployForm.department_id" placeholder="输入员工部门编号">
              </el-input>
            </el-form-item>
          <el-form-item label="job_id" prop="job_id">
              <el-input v-model="addEmployForm.job_id" placeholder="输入员工工作编号">
              </el-input>
            </el-form-item>
          <el-form-item label="basic_Salary" prop="basic_Salary">
              <el-input v-model="addEmployForm.basic_Salary" placeholder="输入员工基础工资">
              </el-input>
            </el-form-item>
          <el-form-item label="arrival_time" prop="arrival_time">
            类似格式1970-01-01 00:00:00
              <el-input v-model="addEmployForm.arrival_time" placeholder="输入员工到岗时间">
              </el-input>
            </el-form-item>
          <el-form-item label="departure_time" prop="departure_time">
            类似格式1970-01-01 00:00:00
              <el-input v-model="addEmployForm.departure_time" placeholder="输入员工离岗时间">
              </el-input>
            </el-form-item>
            <el-form-item label="rest_holiday" prop="rest_holiday">
              <el-input v-model="addEmployForm.rest_holiday" placeholder="输入员工剩余假期">
              </el-input>
            </el-form-item>
          <el-form-item label="monthly_salary" prop="monthly_salary">
              <el-input v-model="addEmployForm.monthly_salary" placeholder="输入员工月工资">
              </el-input>
            </el-form-item>
        <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitEmploy('addEmployForm')">添加</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>

    <el-button type="primary" @click="dialogVisible1 = true">删除员工</el-button>
      <el-dialog :visible.sync="dialogVisible1">
                <!-- <p>empId:{{selectRecord}}</p> -->
        <el-form @submit.native.prevent>
                    <el-input v-model="deletEmp"
                      placeholder="输入员工编号-回车执行"
                      @keyup.enter.native="deletByEmpId">
                    </el-input>
        </el-form>
      </el-dialog>

    <el-button type="primary" @click="dialogVisible3 = true" width = 90%>查询所有员工</el-button>
      <el-dialog :visible.sync="dialogVisible3">
         <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="selectAllEmp">查询全体员工</el-button>
        </el-form-item>
        <el-table :data="allEmpData" height="250"
          border
          style="width: 100%">
          <el-table-column prop="emp_id" label="emp_id" width="180">
          </el-table-column>
          <el-table-column prop="name" label="name" width="180">
          </el-table-column>
          <el-table-column prop="department_id" label="department_id" width="180">
          </el-table-column>
          <el-table-column prop="job_id" label="job_id" width="180">
          </el-table-column>
          <el-table-column prop="basic_Salary" label="basic_Salary" width="180">
          </el-table-column>
          <el-table-column prop="arrival_time" label="arrival_time" width="180">
          </el-table-column>
          <el-table-column prop="departure_time" label="departure_time" width="180">
          </el-table-column>
          <el-table-column prop="rest_holiday" label="rest_holiday" width="180">
          </el-table-column>
          <el-table-column prop="monthly_salary" label="monthly_salary" width="180">
          </el-table-column>
        </el-table>
      </el-dialog>

    <!-- <el-button type="primary" @click="dialogVisible4 = true">查询一个员工</el-button>
      <el-dialog :visible.sync="dialogVisible4"> -->
      <el-form @submit.native.prevent>
                  <el-input v-model="empId1"
                    placeholder="输入员工编号-回车执行"
                    @keyup.enter.native="getAEmpByEmpId">
                  </el-input>
      </el-form>
          <el-table :data="tableData1" height="250"
            border
            style="width: 100%">
            <el-table-column prop="emp_id" label="emp_id" width="180">
            </el-table-column>
            <el-table-column prop="name" label="name" width="180">
            </el-table-column>
            <el-table-column prop="department_id" label="department_id" width="180">
            </el-table-column>
            <el-table-column prop="job_id" label="job_id" width="180">
            </el-table-column>
            <el-table-column prop="basic_Salary" label="basic_Salary" width="180">
            </el-table-column>
            <el-table-column prop="arrival_time" label="arrival_time" width="180">
            </el-table-column>
            <el-table-column prop="departure_time" label="departure_time" width="180">
            </el-table-column>
            <el-table-column prop="rest_holiday" label="rest_holiday" width="180">
            </el-table-column>
            <el-table-column prop="monthly_salary" label="monthly_salary" width="180">
            </el-table-column>
          </el-table>
      <!-- </el-dialog> -->

      <el-button type="primary" @click="dialogVisible5 = true">查询目标员工打卡记录</el-button>
        <el-dialog :visible.sync="dialogVisible5">
                  <p>empId:{{selectRecord1}}</p>
        <el-form @submit.native.prevent>
                    <el-input v-model="selectRecord1"
                      placeholder="输入员工编号-回车执行"
                      @keyup.enter.native="getstatus1">
                    </el-input>
        </el-form>
          <el-table :data="recordTableData1" height="250"
              border
              style="width: 100%">
              <el-table-column prop="emp_id" label="emp_id" width="180">
              </el-table-column>
              <el-table-column prop="name" label="name" width="180">
              </el-table-column>
              <el-table-column prop="department_id" label="department_id" width="180">
              </el-table-column>
              <el-table-column prop="job_id" label="job_id" width="180">
              </el-table-column>
              <el-table-column prop="arrival_time" label="arrival_time" width="180">
              </el-table-column>
              <el-table-column prop="departure_time" label="departure_time" width="180">
              </el-table-column>
              <el-table-column prop="status" label="status" width="180">
              </el-table-column>
          </el-table>
        </el-dialog> 

    <el-button type="primary" @click="dialogVisible2 = true">修改</el-button>
      <el-dialog :visible.sync="dialogVisible2">
        <el-form @submit.native.prevent :model="changeForm" label-width="100px">
          <el-form-item label="emp_id" prop="emp_id">
              <el-input v-model="changeForm.emp_id" placeholder="输入员工编号">
              </el-input>
            </el-form-item>
           <el-form-item label="newBasicSalary" prop="newBasicSalary">
              <el-input v-model="changeForm.newBasicSalary" placeholder="输入新基础工资-回车执行" @keyup.enter.native="updateBasicSalary" >
                <!-- 让输入框长 -->
              </el-input>
            </el-form-item>
          <el-form-item label="newMonthSalary" prop="newMonthSalary">
              <el-input v-model="changeForm.newMonthSalary" placeholder="输入新月工资-回车执行" @keyup.enter.native="updateMonthSalary">
              </el-input>
            </el-form-item>
          <el-form-item label="newArrivalTime" prop="newArrivalTime">
            类似格式1970-01-01 00:00:00
              <el-input v-model="changeForm.newArrivalTime" placeholder="输入员工到岗时间-回车执行" @keyup.enter.native="updateArrivalTime">
              </el-input>
            </el-form-item>
          <el-form-item label="newDepartureTime" prop="newDepartureTime">
            类似格式1970-01-01 00:00:00
              <el-input v-model="changeForm.newDepartureTime" placeholder="输入员工离岗时间-回车执行" @keyup.enter.native="updateDepartureTime">
              </el-input>
            </el-form-item>
          <el-form-item label="newDepartmentId" prop="newDepartmentId">
              <el-input v-model="changeForm.newDepartmentId" placeholder="输入员工部门号-回车执行"  @keyup.enter.native="updateDepartmentId">
              </el-input>
            </el-form-item>
          <el-form-item label="newJobId" prop="newJobId">
              <el-input v-model="changeForm.newJobId" placeholder="输入新的员工职位-回车执行"  @keyup.enter.native="updateJobId">
              </el-input>
            </el-form-item>
        <!-- <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="submitForm('addUserForm')">添加</el-button>
        </el-form-item> -->
      </el-form>
      </el-dialog>

    </el-form>
    
  </div>
</template>

<script>
// 导入请求方法
import {
  userList,
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
    

      dialogVisible: false,
      dialogVisible0: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      // dialogVisible4: false,
      dialogVisible5: false,

      selectRecord1: '',
      recordTableData1: [],
      allEmpData: [],
      tableData1: [],

      deletEmp: '',

      empId1: '',

      changeForm : {
          emp_id: '',
          newBasicSalary: '',
          newMonthSalary: '',
          newArrivalTime: '',
          newDepartureTime: '',
          newDepartmentId: '',
          newJobId: ''//剩下方法
      },
      //添加用户默认为空
      addUserForm: {//注意名字
        emp_id: '',
        phone_id: '',
        job_id: '',
        password: '',
      },

      addEmployForm: {
        emp_id: '',
        name: '',
        department_id: '',
        job_id: '',
        basic_Salary: 0,
        arrival_time: '',
        departure_time: '',
        rest_holiday: 0,
        monthly_salary: 0
      }


    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    submitForm() {
      // this.$refs[formName].validate((valid) => {
          // if (valid) {
            if(this.addUserForm.emp_id==''){
            alert("员工工号不能为空")
          }else if(this.addUserForm.phone_id==''){
            alert("电话不能为空")
          }else if(this.addUserForm.job_id==''){
            alert("职位号不能为空")
          }else if(this.addUserForm.password==''){
            alert("密码不能为空")
          }else{
            // var addUsers=new URLSearchParams()
            // addUsers.append("emp_id",this.addUserForm.emp_id)
            // addUsers.append("phone_id",this.addUserForm.phone_id)
            // addUsers.append("job_id",this.addUserForm.job_id)
            // addUsers.append("password",this.addUserForm.password)
            // export const userSave = (params) => { return req("post", "/top/addUsers", params) };
            this.$axios.post('/top/addUsers',this.addUserForm).then((res) => {
              alert('添加用户成功')
              console.log(res)
            // eslint-disable-next-line handle-callback-err
                }).catch((error) => {
                  alert('false1')
                })
              
            }
          
      // })
      },

      submitEmploy() {
      
            if(this.addEmployForm.emp_id==''){
            alert("员工工号不能为空")
          }else if(this.addEmployForm.name==''){
            alert("名字不能为空")
          }else if(this.addEmployForm.department_id==''){
            alert("部门编号不能为空")
          }else if(this.addEmployForm.job_id==''){
            alert("职位编号不能为空")
          }else if(this.addEmployForm.basic_Salary==0){
            alert("基础工资不能为空")
          }else if(this.addEmployForm.arrival_time==''){
            alert("到达时间不能为空")
          }else if(this.addEmployForm.departure_time==''){
            alert("离开时间不能为空")
          }else if(this.addEmployForm.rest_holiday==0){
            alert("剩余假期不能为空")
          }else if(this.addEmployForm.monthly_salary== 0){
            alert("月工资不能为空")
          }else{
           
            this.$axios.post('/top/addEmployees',this.addEmployForm).then((res) => {
              alert('添加员工成功')
              console.log(res)
            // eslint-disable-next-line handle-callback-err
                }).catch((error) => {
                  alert('false2')
                })
              
            }
          
      // })
      },
   
   deletByEmpId(){
    //  const self = this
      this.$axios.delete('/top/dropEmployees?emp_id=' + this.deletEmp).then((res) => {
        console.log(res)
        alert("delet success")
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false3')
      })
   },

   updateBasicSalary(){
     if(this.changeForm.emp_id==''){
            alert("员工编号不能为空")
        }else if(this.changeForm.newBasicSalary==''){
            alert("新基础工资不能为空")
        }else{
          this.$axios.put('/top/changeBasic_Salary?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newBasicSalary).then((res) => {
        alert('基础工资更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false4')
      })
      }
   },

   updateMonthSalary() {
     if(this.changeForm.emp_id==''){
            alert("员工编号不能为空")
        }else if(this.changeForm.newMonthSalary==''){
            alert("新月工资不能为空")
        }else{
          this.$axios.put('/top/changeMonthly_Salary?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newMonthSalary).then((res) => {
        alert('月工资更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false5')
      })
      }
   },

   updateArrivalTime() {
     if(this.changeForm.emp_id==''){
            alert("员工编号不能为空")
        }else if(this.changeForm.newArrivalTime==''){
            alert("新到达时间不能为空")
        }else{
          this.$axios.put('/top/changeArrival_time?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newArrivalTime).then((res) => {
        alert('到岗时间更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false6')
      })
      }
   },

   updateDepartureTime() {
     if(this.changeForm.emp_id==''){
            alert("员工编号不能为空")
        }else if(this.changeForm.newDepartureTime==''){
            alert("新离开时间不能为空")
        }else{
          this.$axios.put('/top/changeDeparture_time?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newDepartureTime).then((res) => {
        alert('离岗时间更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false7')
      })
      }
   },

    updateDepartmentId() {
      if(this.changeForm.emp_id==''){
            alert("员工工号不能为空")
        }else if(this.changeForm.newDepartmentId==''){
            alert("信部门编号不能为空")
        }else{
          this.$axios.put('/top/changeDepartment_id?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newDepartmentId).then((res) => {
        alert('部门编号更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false8')
      })
      }
    },

    updateJobId() {
      if(this.changeForm.emp_id==''){
            alert("员工工号不能为空")
        }else if(this.changeForm.newJobId==''){
            alert("新职位编号不能为空")
        }else{
          this.$axios.put('/top/changeJob_id?emp_id=' + this.changeForm.emp_id +
       '&newValue=' + this.changeForm.newJobId).then((res) => {
        alert('职位编号更新成功')
        console.log(res)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false9')
      })
      }
    },

    selectAllEmp() {
      this.$axios.get('/top/queryAllEmployees').then((res) => {
        console.log(res)
        this.allEmpData = res.data
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false3')
      })
    },

    getAEmpByEmpId() {
       const self = this
      this.$axios.get('/top/queryEmployees?emp_id=' + this.empId1).then((res) => {
        console.log(res)
        self.tableData1.push(res.data)
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false4')
      })
    },

     getstatus1()  {
      const self = this
      this.$axios.get('/top/queryRecord?emp_id=' + this.selectRecord1).then((res) => {
        console.log(res)
        self.recordTableData1 = res.data
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        alert('false2')
      })
    },




  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 